<div class="class-style">
  <div class="page-width">
    {% if section.settings.heading != blank %}
    <h2 class="left">{{ section.settings.heading  }}</h2>
    {% endif %}
    <div class="style-content">
        <div class="swiper-father">
          <div class="swiper swiper-class-style">
            <div class="swiper-scrollbar des-scrollbar"></div>
            <div class="swiper-wrapper">
                {%- for block in section.blocks -%}
                    <div class="swiper-slide style-product {% if  forloop.index0 == 0  or  forloop.index0 == 3 %}  {% else %} small-slide  {% endif %}">
                        <div class="block-style">
                        <div class="pc-banner image-with-text__media image-with-text__media--{{ block.settings.height }} gradient color-{{ block.settings.color_scheme }} global-media-settings {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                            {% if block.settings.height == 'adapt' and block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                             >
                            <img srcset="
                              {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                              {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                              {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                              {%- if block.settings.image.width >= 1140 -%}{{ block.settings.image | img_url: '1140x' }} 1140w,{%- endif -%}
                              {%- if block.settings.image.width >= 1200 -%}{{ block.settings.image | img_url: '1200x' }} 1200w,{%- endif -%}
                              {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                              {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                              {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                              {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}" sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}" data-src="{{ block.settings.image | img_url: '1500x' }}" loading="lazy" class="lazyload" alt="{{ block.settings.image.alt | escape }}" width="{{ block.settings.image.width }}" height="{{ block.settings.image.height }}">
                           </div>
                        <div class="image_mobile image-with-text__media image-with-text__media--{{ block.settings.height }} gradient color-{{ block.settings.color_scheme }} global-media-settings {% if block.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                            {% if block.settings.height == 'adapt' and block.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
                            >
                            <img srcset="
                              {%- if block.settings.image_mobile.width >= 323 -%}{{ block.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
                              {%- if block.settings.image_mobile.width >= 360 -%}{{ block.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
                              {%- if block.settings.image_mobile.width >= 710 -%}{{ block.settings.image_mobile | img_url: '710x' }} 710w,{%- endif -%}
                              {%- if block.settings.image_mobile.width >= 1140 -%}{{ block.settings.image_mobile | img_url: '1140x' }} 1140w,{%- endif -%}
                              {%- if block.settings.image_mobile.width >= 1200 -%}{{ block.settings.image_mobile | img_url: '1200x' }} 1200w,{%- endif -%}
                              {%- if block.settings.image_mobile.width >= 1780 -%}{{ block.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
                              {%- if block.settings.image_mobile.width >= 2000 -%}{{ block.settings.image_mobile | img_url: '2000x' }} 2000w,{%- endif -%}
                              {%- if block.settings.image_mobile.width >= 3000 -%}{{ block.settings.image_mobile | img_url: '3000x' }} 3000w,{%- endif -%}
                              {%- if block.settings.image_mobile.width >= 3840 -%}{{ block.settings.image_mobile | img_url: '3840x' }} 3840w,{%- endif -%}" sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}" data-src="{{ block.settings.image | img_url: '1500x' }}" loading="lazy" class="lazyload" alt="{{ block.settings.image_mobile.alt | escape }}" width="{{ block.settings.image_mobile.width }}" height="{{ block.settings.image_mobile.height }}">
                           </div>
                              <div class="text-style {% if  forloop.index0 == 0  or  forloop.index0 == 3 %}  animate__animated wow animate__fadeInUp animate__slow {% else %} small-style {% endif %}">
                            <div class="block_text">
                                {% if block.settings.title !=blank %}

                                <div class="text">{{ block.settings.title }}</div>
                            
                              {% endif %}
                              {% if block.settings.text !=blank %}
                              <div class="richtext">{{ block.settings.text }}</div>
                              {% endif %}
                            </div>
                          </div>
                        </div>
                      </div>
                {%- endfor -%}    
            </div>
          </div>
        </div>
    </div>
  </div>
</div>





{% schema %}
    {
      "name": "Ride style",
      "tag": "section",
      "class": "ride-style spaced-section spaced-section--full-width",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        }
      ],
      "blocks": [
      {
        "type": "image",
        "name": "image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image mobile"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Title"
          },
          {
            "type": "text",
            "id": "title_us",
            "label": "Title US"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Richtext EU"
          },
          {
            "type": "richtext",
            "id": "text_us",
            "label": "Richtext US"
          },
          {
            "type": "select",
            "id": "height",
            "options": [
              {
                "value": "adapt",
                "label": "adapt"
              },
              {
                "value": "small",
                "label": "small"
              },
              {
                "value": "large",
                "label": "large"
              }
          ],
          "default": "adapt",
          "label": "adapt"
        }
        ]
      }
    ],
      "presets": [
        {
          "name": "Ride style"
        }
      ]
    }
      {% endschema %}